<template>
	<view class="navbarbtn-container">
		<view class="navbarbtn-content">
			<text :class="question == 1 ? 'visibility' : ''" @click="preFn">上一题</text>
			<text>第{{question}}/{{data.length}}题</text>
			<text :class="question == data.length ? 'visibility' : ''" @click="nextFn">下一题</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "navbarbtn",
		props: {
			data: {
				type: Array,
				default: [{
					title: "默认标题",
					answer: "默认答案",
				}]
			}
		},
		data() {
			return {
				randomarr: [], // 打乱后的随机数组
				currentobj: {}, // 当前显示的题目
				question: 1, // 当前是第几道题,
			};
		},
		mounted() {
			// 点击进来该页面的时候，获取后台数据，展示第一条数据
			// 先将所有数组进行打乱: uni.$u.randomArray(this.questionarr)
			this.randomarr = uni.$u.randomArray(this.data);
			// 只需要将第一条数据放在当前显示数组中
			this.currentobj = this.randomarr[this.question - 1];
			// 第一次将一条数据传递给父元素
			this.$emit("reply", this.currentobj)
		},
		updated() {
			this.$emit("reply", this.currentobj)
		},
		methods: {
			// 上一题
			preFn() {
				this.question > 1 ? this.question-- : 1;
				this.currentobj = this.data[this.question - 1];
			},
			// 下一题
			nextFn() {
				this.question < this.data.length ? this.question++ : this.question;
				this.currentobj = this.data[this.question - 1];
			},
		}
	}
</script>

<style lang="scss">
	.navbarbtn-content {
		padding: 18rpx 24rpx;
		@include flex;
		justify-content: space-between;
	}

	.visibility {
		visibility: hidden;
	}
</style>
